<template>
	<view>
		<uni-section class="mb-10" title="单据编码-单序号：" type="square">
			<template v-slot:right>
				{{box.fchrExportStockNo}}-{{box.ftinorder}}
			</template>
		</uni-section>
		<view v-if="photoList.length > 0">
			<view class="image-grid">
				<view v-for="(imagePath, index) in photoList" :key="index" >
					<uni-card :is-full="true" spacing="0px" padding="0px">
						
						<image :src="imagePath.picUrl" class="imgitem" mode="aspectFill"
							@click="toggleImagePreview(imagePath.picUrl)" />
						
						<view class="dataCheckbox">
							<p v-if="imagePath.isBeforeOrAfter==0">拍摄前</p>
							<p v-else>拍摄后</p>
							<p>位置:{{imagePath.position}}</p>
						</view>

					</uni-card>
				</view>

			</view>
		</view>
		<view v-else>
			<view class="empty-content" style="margin: 0 20rpx;">
				<pinapp-empty-page></pinapp-empty-page>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';
	import api from '@/api/boxImgDetail.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'


	const photoList = ref([]);
	const box = ref({
		fchrExportStockNo:"",
		ftinorder:""
	})
	const $instance = ref(getCurrentInstance().proxy)

	onLoad((options) => {
		const eventChannel = $instance.value.getOpenerEventChannel();
		eventChannel.once('box', (value) => {
			box.value = value.data;
			getBoxImgList();
		})

	})
	//获取照片
	const getBoxImgList = async () => {
		var data = {
			fchrExportStockNo: box.value.fchrExportStockNo,
			ftinorder: box.value.ftinorder,
			limit: 20,
			page: 1
		}
		await api.getBoxImgDetail(data).then(res => {
			photoList.value.splice(0, photoList.value.length, ...res.data);
			
		})
	}
	//照片预览
	const toggleImagePreview = (url) => {
		uni.previewImage({
			urls: [url],

		});
	}
</script>

<style>
	@import url('@/static/styles/home.css');
</style>